<template>
  <div class="user-page">
    <div class="user-profile">
      <div class="profile-header">
        <div class="avatar-container">
          <img :src="user.avatar" :alt="user.username" class="avatar">
          <button class="btn btn-secondary change-avatar">
            <i class="icon-camera"></i>
            更换头像
          </button>
        </div>
        <div class="profile-info">
          <h1>{{ user.username }}</h1>
          <p class="user-bio">{{ user.bio }}</p>
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-value">{{ user.followers }}</span>
              <span class="stat-label">关注者</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ user.following }}</span>
              <span class="stat-label">关注中</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ user.posts }}</span>
              <span class="stat-label">文章</span>
            </div>
          </div>
        </div>
        <button class="btn btn-primary edit-profile">
          编辑资料
        </button>
      </div>

      <div class="profile-tabs">
        <button 
          v-for="tab in tabs" 
          :key="tab.id"
          :class="['tab-btn', { active: currentTab === tab.id }]"
          @click="currentTab = tab.id"
        >
          {{ tab.label }}
        </button>
      </div>
    </div>

    <div class="tab-content">
      <!-- 我的文章 -->
      <div v-if="currentTab === 'posts'" class="posts-grid">
        <div v-for="post in userPosts" :key="post.id" class="post-card card">
          <h3>{{ post.title }}</h3>
          <p class="post-excerpt">{{ post.excerpt }}</p>
          <div class="post-meta">
            <span class="post-date">{{ post.date }}</span>
            <div class="post-actions">
              <button class="btn btn-icon">
                <i class="icon-edit"></i>
              </button>
              <button class="btn btn-icon">
                <i class="icon-delete"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 我的收藏 -->
      <div v-if="currentTab === 'favorites'" class="favorites-grid">
        <div v-for="item in userFavorites" :key="item.id" class="favorite-card card">
          <h3>{{ item.title }}</h3>
          <p class="favorite-description">{{ item.description }}</p>
          <div class="favorite-meta">
            <span class="favorite-type">{{ item.type }}</span>
            <span class="favorite-date">{{ item.date }}</span>
          </div>
        </div>
      </div>

      <!-- 我的评论 -->
      <div v-if="currentTab === 'comments'" class="comments-list">
        <div v-for="comment in userComments" :key="comment.id" class="comment-card card">
          <div class="comment-header">
            <span class="comment-target">评论于：{{ comment.target }}</span>
            <span class="comment-date">{{ comment.date }}</span>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
          <div class="comment-actions">
            <button class="btn btn-icon">
              <i class="icon-edit"></i>
            </button>
            <button class="btn btn-icon">
              <i class="icon-delete"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- 账号设置 -->
      <div v-if="currentTab === 'settings'" class="settings-form">
        <div class="form-section">
          <h3>基本信息</h3>
          <div class="form-group">
            <label>用户名</label>
            <input v-model="settings.username" type="text">
          </div>
          <div class="form-group">
            <label>个人简介</label>
            <textarea v-model="settings.bio"></textarea>
          </div>
        </div>

        <div class="form-section">
          <h3>安全设置</h3>
          <div class="form-group">
            <label>当前密码</label>
            <input v-model="settings.currentPassword" type="password">
          </div>
          <div class="form-group">
            <label>新密码</label>
            <input v-model="settings.newPassword" type="password">
          </div>
          <div class="form-group">
            <label>确认新密码</label>
            <input v-model="settings.confirmPassword" type="password">
          </div>
        </div>

        <div class="form-section">
          <h3>通知设置</h3>
          <div class="form-group">
            <label class="checkbox-label">
              <input type="checkbox" v-model="settings.emailNotifications">
              <span>接收邮件通知</span>
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input type="checkbox" v-model="settings.pushNotifications">
              <span>接收推送通知</span>
            </label>
          </div>
        </div>

        <button class="btn btn-primary save-settings">
          保存设置
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const currentTab = ref('posts')

const tabs = [
  { id: 'posts', label: '我的文章' },
  { id: 'favorites', label: '我的收藏' },
  { id: 'comments', label: '我的评论' },
  { id: 'settings', label: '账号设置' }
]

const user = ref({
  username: '张三',
  avatar: '/images/default-avatar.png',
  bio: '前端开发工程师，热爱技术分享',
  followers: 123,
  following: 45,
  posts: 28
})

const userPosts = ref([
  {
    id: 1,
    title: 'Vue3 组合式 API 最佳实践',
    excerpt: '本文介绍了 Vue3 组合式 API 的使用技巧和最佳实践...',
    date: '2024-03-15'
  },
  {
    id: 2,
    title: 'TypeScript 类型系统进阶',
    excerpt: '深入探讨 TypeScript 类型系统的进阶用法...',
    date: '2024-03-10'
  }
])

const userFavorites = ref([
  {
    id: 1,
    title: 'React Hooks 完全指南',
    description: '全面介绍 React Hooks 的使用方法和最佳实践',
    type: '文章',
    date: '2024-03-12'
  },
  {
    id: 2,
    title: 'Node.js 性能优化',
    description: 'Node.js 应用性能优化的实用技巧',
    type: '视频',
    date: '2024-03-08'
  }
])

const userComments = ref([
  {
    id: 1,
    target: 'Vue3 新特性解析',
    content: '这篇文章写得很好，对 Vue3 的新特性解释得很清楚！',
    date: '2024-03-14'
  },
  {
    id: 2,
    target: 'TypeScript 入门教程',
    content: '感谢分享，对初学者很有帮助！',
    date: '2024-03-09'
  }
])

const settings = ref({
  username: '张三',
  bio: '前端开发工程师，热爱技术分享',
  currentPassword: '',
  newPassword: '',
  confirmPassword: '',
  emailNotifications: true,
  pushNotifications: true
})
</script>

<style scoped>
.user-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.user-profile {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.change-avatar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
}

.profile-info {
  flex: 1;
}

.profile-info h1 {
  margin: 0 0 8px;
  font-size: 24px;
}

.user-bio {
  color: var(--text-secondary);
  margin: 0 0 16px;
}

.user-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.edit-profile {
  align-self: flex-start;
}

.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}

.tab-btn {
  padding: 16px 24px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.tab-btn:hover {
  color: var(--primary-color);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.tab-content {
  padding: 24px;
}

.posts-grid,
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.post-card,
.favorite-card,
.comment-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-card h3,
.favorite-card h3 {
  margin: 0;
  font-size: 18px;
}

.post-excerpt,
.favorite-description {
  color: var(--text-secondary);
  margin: 0;
}

.post-meta,
.favorite-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  font-size: 14px;
}

.post-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  padding: 4px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 14px;
}

.comment-content {
  margin: 8px 0;
}

.comment-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.settings-form {
  max-width: 600px;
}

.form-section {
  margin-bottom: 32px;
}

.form-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.form-group label {
  font-size: 14px;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.save-settings {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .user-stats {
    justify-content: center;
  }

  .edit-profile {
    align-self: center;
  }

  .profile-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .tab-btn {
    padding: 12px 16px;
  }

  .posts-grid,
  .favorites-grid {
    grid-template-columns: 1fr;
  }
}
</style> 